<template>
    <div>
        <a-button type="primary" style="margin: 10px 0px" @click="openModal({})">新增</a-button>
        <a-table :dataSource="contentList"
                 :columns="columns"
                 :pagination="pagination"
                 @change="handlerChange"
                 bordered>
            <template #pic="{text,record}">
                <img :src="text" style="width: 50px;height: 50px"/>
            </template>
            <template #status="{text,record}">
                {{text == 0 ? '无效' : '有效'}}
            </template>
            <template v-slot:action="{text,record}">
                <a-button type="primary" @click="openModal(record)">编辑</a-button>
                <a-popconfirm
                        title="删除数据无法恢复，请确认是否删除？"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="okDelete(record.id)"
                >
                    <a-button type="danger">删除</a-button>
                </a-popconfirm>
            </template>
        </a-table>
        <a-modal v-model:visible="visible" title="新增或编辑" @ok="handleOk">
            <a-form v-model="content"
                    :label-col="{ span: 8 }">
                <a-form-item label="类别">
                    <a-select
                            v-model:value="content.categoryId"
                            style="width: 100%"
                            placeholder="请选择"
                            :options="contentCategoryList"
                            :field-names="{label:'name',value:'id'}"
                    ></a-select>
                </a-form-item>
                <a-form-item label="标题">
                    <a-input v-model:value="content.title"></a-input>
                </a-form-item>
                <a-form-item label="链接">
                    <a-input v-model:value="content.url"></a-input>
                </a-form-item>
                <a-form-item label="图片">
                    <a-upload
                            v-model:file-list="fileList"
                            name="file"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            action="http://localhost:9999/mall-contents/upload"
                            :before-upload="beforeUpload"
                            @change="handleChange"
                    >
                        <img v-if="content.pic" :src="content.pic" style="width: 100px;height: 100px;" alt="avatar" />
                        <div v-else>
                            <loading-outlined v-if="loading"></loading-outlined>
                            <plus-outlined v-else></plus-outlined>
                            <div class="ant-upload-text">Upload</div>
                        </div>
                    </a-upload>
                </a-form-item>
                <a-form-item label="状态">
                    <a-checkbox v-model:checked="content.status"></a-checkbox>
                </a-form-item>
                <a-form-item label="排序">
                    <a-input-number v-model:value="content.sortOrder"></a-input-number>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message} from 'ant-design-vue'
    import {LoadingOutlined,PlusOutlined} from '@ant-design/icons-vue'
    export default {
        name: "admin-content",
        components:{
            LoadingOutlined,
            PlusOutlined
        },
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                    align: 'center'
                },
                {
                    title: '类别',
                    dataIndex: 'categoryId',
                    key: 'categoryId',
                    align: 'center'
                },
                {
                    title: '标题',
                    dataIndex: 'title',
                    key: 'title',
                    align: 'center'
                },
                {
                    title: '链接',
                    dataIndex: 'url',
                    key: 'url',
                    align: 'center'
                },
                {
                    title: '图片',
                    dataIndex: 'pic',
                    key: 'pic',
                    slots: {customRender: 'pic'},
                    align: 'center'
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    slots: {customRender: 'status'},
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    slots: {customRender: 'action'},
                    align: 'center'
                }
            ]

            const content = ref({})
            const contentList = ref()
            const contentCategoryList = ref()
            const pagination = ref({
                current: 1,
                pageSize: 6,
            })
            const fileList = ref()
            const loading = ref(false)

            const visible = ref(false);

            const load = () => {
                axios.get('/mall-contents/content/list', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    contentList.value = rs.data.data.list
                    pagination.value.total = rs.data.data.total
                })
            }

            const handlerChange = (pageInfo) => {
                pagination.value = pageInfo
                load()
            }

            const openModal = (obj) => {
                console.log("模态框参数：", obj)
                visible.value = true;
                content.value = JSON.parse(JSON.stringify(obj))
            }

            const handleOk = () => {
                if (content.value.status){
                    content.value.status = 1
                }else {
                    content.value.status = 0
                }
                axios.post('/mall-contents/content/saveOrUpdate', content.value).then(rs => {
                    console.log("新增或修改结果：", rs)
                    if (rs.data.code == 200) {
                        visible.value = false
                        message.success("操作成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/mall-contents/content/delete/' + id).then(rs => {
                    if (rs.data.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const handleChange = info => {
                if (info.file.status === 'uploading') {
                    loading.value = true;
                    return;
                }
                if (info.file.status === 'done') {
                    console.log("上传完成",info)
                    content.value.pic = info.file.response
                    loading.value = false
                }
                if (info.file.status === 'error') {
                    loading.value = false;
                    message.error('upload error');
                }
            };
            const beforeUpload = file => {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    message.error('You can only upload JPG file!');
                }
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isLt2M) {
                    message.error('Image must smaller than 5MB!');
                }
                return isJpgOrPng && isLt2M;
            };

            onMounted(() => {
                axios.get('/mall-contents/contentCategory/queryAll').then(rs=>{
                    contentCategoryList.value = rs.data.data
                })
                load()
            })
            return {
                columns,
                content,
                contentList,
                pagination,
                handlerChange,
                load,
                openModal,
                visible,
                handleOk,
                okDelete,
                contentCategoryList,
                fileList,
                loading,
                handleChange,
                beforeUpload
            }
        }
    }
</script>

<style scoped>

</style>